<template>
	<div class="deliveryGoodsList">
		<el-form ref="formTableRef" size="small" :model="formTable" :rules="rules" :inline="true">
			<el-table class="form-table" :data="formTable.skus" row-key="skuName">
				<el-table-column min-width="150" prop="skuName" label="规格名称" align="center"></el-table-column>
				<el-table-column min-width="100" label="规格图片" align="center">
					<template #default="{ row }">
						<el-form-item :label-width="1" style="width: 80%; max-width: 150px">
							<uploadImage packageName="product" :emptyText="false" v-model:file-list="row.skuImage" :limit="1" width="50px" height="50px">
							</uploadImage>
						</el-form-item>
					</template>
				</el-table-column>
				<el-table-column min-width="150" prop="presentPrice" label="销售价(元)" align="center">
					<template #header>
						<span class="table-is-required">销售价(元)</span>
					</template>
					<template #default="{ row, $index }">
						<el-form-item :prop="`skus.${$index}.presentPrice`" :rules="rules.presentPrice" :label-width="1" style="width: 80%; max-width: 150px">
							<el-input-number :precision="2" :controls="false" :min="0" :max="99999.99" v-model="row.presentPrice" :step="0" />
						</el-form-item>
					</template>
				</el-table-column>
				<el-table-column min-width="150" prop="originalPrice" label="划线价(元)" align="center">
					<template #header>
						<span class="table-is-required">划线价(元)</span>
					</template>
					<template #default="{ row, $index }">
						<el-form-item :prop="`skus.${$index}.originalPrice`" :rules="rules.originalPrice" :label-width="1" style="width: 80%; max-width: 150px">
							<el-input-number :precision="2" :controls="false" :min="0" :max="99999.99" v-model="row.originalPrice" :step="0" />
						</el-form-item>
					</template>
				</el-table-column>
				<el-table-column min-width="150" prop="materialUnit" label="售卖单位" align="center">
					<template #header>
						<span class="table-is-required">售卖单位</span>
					</template>
					<template #default="{ row, $index }">
						<el-form-item prop="materialUnit" :rules="rules.materialUnit" :label-width="1" style="width: 80%; max-width: 150px">
							<el-select v-model="formTable.materialUnit" :disabled="isEdit" placeholder="请选择售卖单位">
								<el-option v-for="item in materialUnitOptions" :key="item.value" :label="item.label" :value="item.value" />
							</el-select>
						</el-form-item>
					</template>
				</el-table-column>
				<!-- <el-table-column min-width="150" prop="productAmount" label="商品数量" align="center">
					<template #header>
						<span class="table-is-required">商品数量</span>
					</template>
					<template #default="{ row, $index }">
						<el-form-item :prop="`skus.${$index}.productAmount`" :rules="rules.productAmount" :label-width="1" style="width: 80%; max-width: 150px">
							<el-input-number :precision="0" :controls="false" :min="0" :max="99999.99" v-model="row.productAmount" :step="0" />
						</el-form-item>
					</template>
				</el-table-column> -->
				<el-table-column min-width="150" prop="inventory" label="可售库存" align="center">
					<template #header>
						<span class="table-is-required">可售库存</span>
					</template>
					<template #default="{ row, $index }">
						<el-form-item :prop="`skus.${$index}.inventory`" :rules="rules.inventory" :label-width="1" style="width: 80%; max-width: 150px">
							<el-input-number
								:disabled="isEdit && row.id"
								:precision="0"
								:controls="false"
								:min="0"
								:max="9999999"
								v-model="row.inventory"
								:step="0"
							/>
						</el-form-item>
					</template>
				</el-table-column>
				<el-table-column v-if="isEdit" min-width="150" prop="addNum" label="增加/减少库存" align="center">
					<template #default="{ row, $index }">
						<el-form-item :prop="`skus.${$index}.addNum`" :label-width="1" style="width: 80%; max-width: 150px">
							<el-input type="number" :precision="0" :min="-9999999" :max="9999999" v-model="row.addNum"></el-input>
							<!-- <el-input-number
								:precision="0"
								:min="-9999999"
								:max="9999999"
								v-model="row.addNum"
								:step="1"
								@change="(value: any) => onAddInventory(value, row, $index)"
							/> -->
						</el-form-item>
					</template>
				</el-table-column>
				<el-table-column min-width="150" prop="weight" label="重量(kg)" align="center">
					<template #default="{ row, $index }">
						<el-form-item :prop="`skus[${$index}].weight`" :label-width="1" style="width: 80%; max-width: 150px">
							<el-input-number :precision="2" :controls="false" :min="0" :max="99999.99" v-model="row.weight" :step="0" />
						</el-form-item>
					</template>
				</el-table-column>
				<el-table-column min-width="150" prop="recommendedPrice" label="建议售价" align="center">
					<template #default="{ row }">
						<el-input-number
							style="width: 100%"
							:disabled="true"
							width="100%"
							:controls="false"
							placeholder="自动关联"
							v-model="row.recommendedPrice"
							:step="0"
						/>
					</template>
				</el-table-column>
				<el-table-column min-width="150" prop="costPrice" label="成本价" align="center">
					<template #default="{ row }">
						<el-input-number :disabled="true" :controls="false" placeholder="自动关联" v-model="row.costPrice" :step="0" />
					</template>
				</el-table-column>
				<el-table-column min-width="150" prop="alipayCode" label="支付宝商品编码" align="center">
					<template #default="{ row, $index }">
						<el-form-item :prop="`skus[${$index}].alipayCode`" :label-width="1" style="width: 80%; max-width: 150px">
							<el-input :maxlength="50" v-model="row.alipayCode" :step="0" />
						</el-form-item>
					</template>
				</el-table-column>
			</el-table>
		</el-form>
	</div>
</template>
<script setup lang="ts" name="AdjustList">
import { ref, reactive, watch } from 'vue';
import { FormRules } from 'element-plus';
import uploadImage from '/@/components/upload/image.vue';

// 定义子组件向父组件传值/事件
const emit = defineEmits(['submit', 'update:modelValue']);
interface Props {
	modelValue: any;
	material: any;
	isEdit: boolean;
}

// // 默认值
let props = withDefaults(defineProps<Props>(), {
	modelValue: () => [],
	isEdit: false,
});

// 表单form
const formTableRef = ref();

//校验规则
const rules = reactive<FormRules<any>>({
	presentPrice: [{ required: true, message: '销售价(元)不能为空', trigger: 'blur' }],
	originalPrice: [{ required: true, message: '划线价(元)不能为空', trigger: 'blur' }],
	materialUnit: [{ required: true, message: '售卖单位不能为空', trigger: 'blur' }],
	inventory: [{ required: true, message: '可售库存不能为空', trigger: 'blur' }],
	productAmount: [{ required: true, message: '商品数量不能为空', trigger: 'blur' }],
});

// 表格数据
const formTable = ref({
	skus: [],
	materialUnit: '',
});
const materialUnitOptions = ref<any>([]);

watch(
	() => props.modelValue,
	(newV: any) => {
		if (newV) {
			const skus: any = newV?.skus.map((v: any) => {
				const target = formTable.value.skus.find((item: any) => item.skuName === v.skuName) || {};
				return {
					...v,
					...target,
				};
			});
			formTable.value = {
				materialUnit: formTable.value.materialUnit || newV.materialUnit,
				skus,
			};
		}
	},
	{
		deep: true,
		immediate: true,
	}
);

watch(
	() => props.material?.materialUnit,
	(newV: any) => {
		if (newV === 1) {
			materialUnitOptions.value = [
				{
					label: '件',
					value: 2,
				},
				{
					label: '瓶',
					value: 1,
				},
			];
		} else if (newV === 0) {
			materialUnitOptions.value = [
				{
					label: '件',
					value: 2,
				},
				{
					label: '盒',
					value: 0,
				},
			];
		} else {
			materialUnitOptions.value = [
				{
					label: '件',
					value: 2,
				},
				{
					label: '盒',
					value: 0,
				},
				{
					label: '瓶',
					value: 1,
				},
			];
		}
		formTable.value = {
			...formTable.value,
			materialUnit: '',
		};
	},
	{
		deep: true,
		immediate: true,
	}
);

// const onAddInventory = (value, row, index) => {
// 	row.inventory = (props.modelValue.skus[index].inventory || 0) + Number(value);
// };

// 表单提交校验
const handleSubmit = () => {
	return formTableRef.value.validate((valid: any) => {
		if (valid) {
			const data = {
				...props.modelValue,
				...formTable.value,
				skus: formTable.value.skus.map((v: any) => {
					return {
						...v,
						inventory: Number(v.inventory || 0) + Number(v.addNum || 0),
					};
				}),
			};

			emit('update:modelValue', data);
			emit('submit');
		} else {
			return false;
		}
	});
};

defineExpose({
	handleSubmit,
});
</script>
<style lang="scss">
.deliveryGoodsList {
	width: 100%;
	.el-form.el-form--inline .el-form-item--default.el-form-item:last-of-type,
	.el-form.el-form--inline .el-form-item--small.el-form-item:last-of-type {
		margin-bottom: 0 !important;
	}
	.el-form-item {
		margin-right: 0;
	}
	.el-input-number {
		width: 128px;
		max-width: 100%;
	}
	.red-up {
		color: red;
	}
	.green-down {
		color: green;
	}
	.el-table .el-table__cell {
		z-index: auto;
	}
}
</style>
